<template>
  <div v-if="data.length != 0">
    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      :customRow="onClickRow"
      bordered
    >
      <a slot="name" slot-scope="text">{{ text }}</a>
    </a-table>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
const columns = [
  {
    title: "实习方向",
    dataIndex: "name",
    width: 400,
  },
  {
    title: "详情简介",
    dataIndex: "description",
  },
];
export default {
  data() {
    return {
      data: [], //表格的数据
      columns, //标头的配置
    };
  },
  methods: {
    ...mapMutations("InternshipApply", ["setSXDirectionSelectKey"]),
    //点击行
    onClickRow(SelecrRow) {
      return {
        on: {
          click: () => {
            this.setSXDirectionSelectKey({key:[SelecrRow.key],name:SelecrRow.name});
          },
        },
      };
    },
    GetData() {
      this.$api.GetCategory()
        .then((res) => {
          this.data = res.data.result.map((item) => {
            return {
              key: item.id,
              name: item.name,
              description: item.description,
            };
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.GetData();
  },
  computed: {
    ...mapState("InternshipApply", ["SXDirectionSelectKey"]),
    rowSelection() {
      return {
        type: "radio", //单选
        selectedRowKeys: this.SXDirectionSelectKey, //默认的选中项
        //点击前面的单选按钮
        onChange: (selectedRowKeys) => {
          this.setSXDirectionSelectKey(selectedRowKeys);
        },
      };
    },
    pagination() {
      return {
        pageSize: 5, //每页中显示数据
      };
    },
  },
};
</script>

<style lang="less" scope>
.ant-table-wrapper {
  .ant-spin-nested-loading {
    border: 1px solid #ccc;
  }
}

.ant-table-thead {
  tr {
    th {
      background-color: #d8d8d8;
      border-bottom: 1px solid #d8d8d8;
    }
  }
}

.ant-table-row-selected {
  td {
    background-color: #f0f0f0 !important;
  }
}
</style>